import React, { Component } from 'react'
import { Form, Input, Button, Modal, Checkbox, message, Pagination } from 'antd'
import { StarOutlined, StarFilled, SafetyCertificateOutlined } from '@ant-design/icons';
import './blog_detail.less'
import 'braft-editor/dist/output.css'
import TopNav from '../../top_nav'
import BottomBar from '../../bottom_bar'
import blogApi from '../../../api/blog'
import { getMemberInfo } from '../../../utils/auth'
import parseUrl from '../../../utils/parseUrl'
import memberCommontApi from '../../../api/memberCommont'
export default class BlogDeetail extends Component {

  state = {
    blogInfo: {},
    isCollect: false,
    isModalVisible: false,
    options: [
      { value: '1', label: '广告或垃圾信息' },
      { value: '2', label: '辱骂' },
      { value: '3', label: '违法' },
      { value: '4', label: '抄袭' },
      { value: '5', label: '不合适内容' },
    ],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    commontList: []

  }

  componentDidMount() {
    window.scrollTo(0, 0)
    this.getBlogInfo()

  }
  getBlogInfo = () => {
    blogApi.info(parseUrl(this.props.location.search).blogId).then(res => {
      if (res.success) {
        this.getCommontList(res.data.data.id, this.state.pageNum, this.state.pageSize)
        this.setState({
          blogInfo: res.data.data
        })
      }
    }).catch(err => {
      console.log(err);
    })
  }

  getCommontList = (blogId, pageNum, pageSize) => {
    memberCommontApi.list({ blogId, pageNum, pageSize }).then(res => {
      if (res.success) {
        this.setState({
          commontList: res.data.records,
          total: res.data.total
        })
      }
    }).catch(err => {

    })
  }

  handleCollect = () => {
    this.setState({
      isCollect: !this.state.isCollect
    })
    if (!this.state.isCollect) {
      const blogId = parseUrl(this.props.location.search).blogId
      const memberId = getMemberInfo().id
      blogApi.collect({ blogId, memberId })
    }

  }
  showModel = () => {
    this.setState({
      isModalVisible: true
    })
  }
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    })
  }
  securityRef = React.createRef()
  handleSecurity = (data) => {
    message.success("举报成功！")
    this.setState({
      isModalVisible: false
    })
    this.securityRef.current.setFieldsValue({
      "reaconType": [],
      "reason": ""
    })
  }
  commentRef = React.createRef()
  handleComment = (data) => {
    const blogId = this.state.blogInfo.id
    const memberId = getMemberInfo().id
    const jsonData = { blogId, memberId, ...data }
    if (blogId && memberId) {
      memberCommontApi.add(jsonData).then(res => {
        if (res.success) message.success("发布评论成功")
        this.commentRef.current.setFieldsValue({
          content: ''
        })
        this.getCommontList(blogId, this.state.pageNum, this.state.pageSize)
      }).catch(err => {
        console.log(err);
      })
    }else{
      message.warning("请先登录")
    }

  }
  // 修改页码
  onPageChange = (current, pageSize) => {
    this.getCommontList(this.state.blogInfo.id, current, pageSize)
  }
  render() {
    const { blogInfo, isCollect, isModalVisible, options, commontList, pageNum, total } = this.state
    return (
      <div className="blog-detail-container">
        {/* 顶部 */}
        <TopNav style={{ background: '#fff', color: '#666' }} active="/blog" />
        {/* 内容 */}
        <div className="detail-content">
          <div className="blog-text">
            <header>
              <div className="header-left">
                <h1>{blogInfo.title}</h1>
                <div className="header-left-bottom">
                  <div className="avatar">
                    <img src={blogInfo.memberAvatar} alt="avatar" />
                  </div>
                  <span>{blogInfo.memberName}</span>
                  <div className="type-box">
                    <span className="type-title">分类</span>
                    <span>{blogInfo.categoryName}</span>
                  </div>
                </div>
              </div>
              <div className="header-right">
                <div className="header-right-top">
                  <Button icon={!isCollect ? <StarOutlined /> : <StarFilled />} type="link" onClick={this.handleCollect}>{!isCollect ? '收藏' : '已收藏'}</Button>
                  <SafetyCertificateOutlined onClick={this.showModel} style={{ fontSize: '20px', color: 'green' }} />
                </div>
                <div className="header-right-bottom">
                  发布于：{blogInfo.gmtCreate}
                </div>
              </div>
            </header>
            <div className="blog-md" >
              <div className="braft-output-content" dangerouslySetInnerHTML={{ __html: blogInfo.content }}></div>
            </div>
          </div>

          <div className="blog-commont">
            <Form ref={this.commentRef} onFinish={this.handleComment}>
              <Form.Item
                name="content"
                rules={[{ required: true, message: '评论内容不能为空' }]}
              >
                <Input.TextArea rows={4} />
              </Form.Item>
              <Form.Item >
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <Button htmlType="submit" type="primary">
                    发表评论
                  </Button>
                </div>
              </Form.Item>
            </Form>
            <h2>全部评论</h2>
            <ul className="commont-list">
              {
                commontList.map(item => {
                  return <li className="commont-item" key={item.id}>
                    <div className="avatar">
                      <img src={item.memberAvatar} alt="avatar" />
                    </div>
                    <div className="commont-text">
                      <div>
                        <span className="member-name">{item.memberName}</span>
                        <span className="create-time">{item.gmtCreate}</span>
                      </div>
                      <div>{item.content}</div>
                    </div>
                  </li>
                })
              }
            </ul>
            <div style={{ textAlign: 'center', margin: '10px 0' }}>
              <Pagination
                onChange={this.onPageChange}
                defaultCurrent={pageNum}
                total={total}
              />
            </div>
          </div>
        </div>
        {/* 底部 */}
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />

        {/* 举报弹框 */}
        <Modal visible={isModalVisible} onCancel={this.handleCancel} footer={false}>
          <h3 style={{ fontWeight: 'bold' }}>举报</h3>
          <Form
            name="normal_login"
            className="login-form"
            onFinish={this.handleSecurity}
            ref={this.securityRef}
          >
            <Form.Item>
              <Form.Item name="reaconType" valuePropName="checked" noStyle>
                <Checkbox.Group options={options} onChange={this.changeReason} />
              </Form.Item>
            </Form.Item>
            <Form.Item
              name="reason"
              rules={[{ required: true, message: '举报理由不能为空' }]}
            >
              <Input.TextArea rows={4} placeholder="请写下您的举报理由" />
            </Form.Item>

            <Form.Item>
              <div style={{ width: '100%', textAlign: 'right' }}>
                <Button style={{ marginRight: '20px' }} onClick={this.handleCancel}>取消</Button>
                <Button type="primary" htmlType="submit" className="login-form-button">举报</Button>
              </div>

            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
